<template>
    <el-row class="tac">
      <el-col :span="35">
        <el-menu
          default-active="2"
          class="el-menu-vertical-demo"
          
        >
          <el-sub-menu index="1">
            <template #title>
              <el-icon><location /></el-icon>
              <span>商品管理</span>
            </template>
            <el-menu-item-group title="商品类型">
              <el-menu-item index="1-1" @click="toAddCategory">添加商品类型</el-menu-item>
              <el-menu-item index="1-2" @click="toCategoryList">商品类型列表</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="商品属性">
              <el-menu-item index="1-3" @click="toAddAttribute">添加商品属性</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="商品sku">
              <el-menu-item index="1-4" @click="toAddSkuTable">添加商品sku</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="商品spu">
              <el-menu-item index="1-5" @click="toSpuList">spu列表</el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>
          <el-menu-item index="2">
            <el-icon><icon-menu /></el-icon>
            <span @click="toOrdersList()">订单管理</span>
          </el-menu-item>
          <el-menu-item index="3">
            <el-icon><document /></el-icon>
            <span @click="toUserList()">用户管理</span>
          </el-menu-item>
        </el-menu>
      </el-col>
    </el-row>
  </template>
  
  <script lang="ts" setup>
  import { useRouter } from 'vue-router'
import {
    Document,
    Menu as IconMenu,
    Location,
    Setting,
  } from '@element-plus/icons-vue'
  // const handleOpen = (key: string, keyPath: string[]) => {
  //   console.log(key, keyPath)
  // }
  // const handleClose = (key: string, keyPath: string[]) => {
  //   console.log(key, keyPath)
  // }

  const router = useRouter()
  
  function toAddCategory(){
    router.push("addcategory")
  }
  function toCategoryList(){
    router.push("categorylist")
  }
  function toAddAttribute(){
    router.push("addattributekey")
  }
  function toAddSkuTable(){
    router.push("addskutable")
  }
  function toSpuList(){
    router.push("tospulist")
  }
  function toOrdersList(){
    router.push("toorderslist")
  }
  function toUserList(){
    router.push("userlist")
  }
  </script>
  